import React from 'react'
import {actions} from 'mirrorx'
// import {FormattedMessage} from 'react-intl'
class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      detail: {},
      showTK: false,
      hideModelTitle: '',
      hideModelContent: ''
    }
    this.showAlert = this.showAlert.bind(this)
    this.policyNo = T.urlQuery('policyNo') || 'UO102120295055902'
    this.policyState = T.urlQuery('state') || '1'
    this.goodsName = T.urlQuery('goodsName')
    this.Lang = window.LangMessage || {}
  }

  componentDidMount () {
    T.fetchFusion({
      url: '/fusion/yj/queryPolicyDetail',
      data: {
        state: this.policyState,
        orderNo: this.policyNo
      }
    }).then((res) => {
      if (res.success) {
        this.setState({
          detail: res.value
        })
      }
    })
  }

  showAlert () {
    actions.routing.push({pathname: 'surrender-compose', search: '?policyNo=' + this.policyNo})
    // Alert('', Lang.yj_surrender_tip || 'Are you sure to surrender?', [
    //   { text: 'Cancel' },
    //   { text: 'Yes', onPress: () => this.surrender() }
    // ])
  }

  surrender () {
    actions.routing.push({pathname: '/surrender-success-yj', search: '?policyNo=' + this.policyNo})
  }

  renderButton (state) {
    let html
    if (state === '1') {
      html = (<div className='footer diy_background tac f30 fcw pt30' onClick={this.showAlert}><span>{ this.Lang.surrender || 'Surrender'}</span></div>)
    } else if (state === '2') {
      html = ''
    } else if (state === '3') {
      html = (<div className='footer diy_background tac f30 fcw pt30' onClick={() => { window.location.href = '/pay-yj?orderNo=' + this.policyNo + '&productName=' + (this.goodsName || this.state.detail.goodsName) }}><span>{ this.Lang.pay_now || '立即支付' }</span></div>)
    }
    return html
  }

  render () {
    const policyState = {
      '1': this.Lang.valid || 'valid',
      '2': this.Lang.uneffective || 'invalid',
      '3': this.Lang.dealing || 'processing'
    }
    const { detail } = this.state
    return (<div className='policy-detail-yj-page'>
      <div className='general'>
        <div className='left'>
          <div className='name f36'>{this.goodsName || detail.goodsName}</div>
          <div className='detail'>
            <div className='detail-item'>{detail.insurer}</div>
            {this.policyState !== '3' && (<div>
              <div className='detail-item'>{this.Lang.policyNo || 'policyNo'} {this.policyNo}</div>
              <div className='detail-item'>保険期間 {detail.insuredStart}-{detail.insuredEnd}</div>
            </div>)}
          </div>
        </div>
        <div className='right'>
          <img src='/assets/images/title-yj.png' alt='' className='img' />
        </div>
      </div>
      <ul className='list'>
        <li className='item clearfix f32'>
          <span className='fl'>{this.Lang.insurant || 'Insurant'}</span>
          <span className='fr'>{detail.insurant && detail.insurant.name}</span>
        </li>
        <li className='item clearfix f32'>
          <span className='fl'>{this.Lang.policy_fee || 'Insured Amount'}</span>
          <span className='fr high-light'>{T.formatPrice(T.cutPrice(detail.amount))}</span>
        </li>
        <li className='item clearfix f32'>
          <span className='fl'>{this.Lang.policy_status_uw || 'State'}</span>
          <span className='fr'>{policyState[this.policyState]}</span>
        </li>
        {this.policyState !== '3' && (
          <li className='item clearfix f32'>
            <span className='fl'>{ this.Lang.coverage_period || 'Insured period'}</span>
            <span className='fr'>{detail.insuredStart}-{detail.insuredEnd}</span>
          </li>
        )}
      </ul>
      <div className='check-for f24'>
        <a className='diy_color'>《{ this.Lang.policy_items || 'Insurance provision'}》</a> & <a className='diy_color'>《{ this.Lang.insure_must_know || 'Service protocol'}》</a>
        {'をご参照ください。' || this.Lang.yj_check || 'Check for'}
      </div>
      {this.renderButton(this.policyState)}
    </div>)
  }
}

export default App
